<style>
.style-div {
	margin-top: 20px;
}

.spec-text {
	display:inline-block;
	padding: 30px;
	vertical-align:top;
	width:300px
}
.spec-text.share {
    padding: 0;
}
.avatar-l {
	width: 84px;
    height: 167px;
    display: block;
}
.avatar-l.rect {
    height: 84px;
    margin-top: 20px;
}

.avatar-l-uploader-icon {
	font-size: 36px;
    color: #8c939d;
    height: 167px;
    width: 84px;
    line-height: 167px;
    text-align: center;
    float: left;
    position: relative;
    border: 1px dashed #d9d9d9;
    background: #e5e5e5;
}

.avatar-l-uploader-icon.rect{
    height: 84px;
    line-height: 84px;
    margin-top: 20px;
}

.img-item {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}
.style-div {
	background: #fff;
	padding: 30px;
}
</style>
<template>
  	<div class="question">
    	<div class="content-div">
			<Row style="margin-top:10px">
				<Col span="14" class="table-form-input-select-col">
					<span class="alltitle" style="line-height:30px"><router-link to="项目列表"> 项目列表</router-link> > <router-link to="questionnaire"> 外部雇主调研板块</router-link></span>
				</Col>				
			</Row>
		</div>
		<div class="content-div">
			<Row style="margin-top:10px">
				<Col span="2">
					<router-link :to="{ name: 'questionmgr', params: { qid: qid }}"><Button>问题管理</Button></router-link>
				</Col>
				<Col span="2">
					<router-link :to="{ name: 'datamgr', params: { qid: qid }}"><Button>数据管理</Button></router-link>
				</Col>
				<Col span="2">
					<router-link :to="{ name: 'stylemgr', params: { qid: qid }}"><Button type="primary">样式管理</Button></router-link>
				</Col>			
				<Col span="2" offset="16">
					<Button type="info" @click="saveStyle">保存样式</Button>
				</Col>
			</Row>
		</div>
		<div class="content-div">

			<div class="style-div">
				<h2>内容样式</h2>
				<div  style="margin-top: 10px">
					<div class="img-item">
						 <Form inline>
                            <FormItem prop="forground">
								<img v-if="forground" :src="`https://evp.51job.com/51job/api/51miniadmin/${forground}`" class="avatar-l" @click="handleClick">
                                <i v-else class="img-border el-icon-plus avatar-l-uploader-icon" @click="handleClick">+</i>
                                    <div class="up-file" style="display:none">
                                        <form>
                                            <input class="forinput" accept="image/*" name="upimage" type="file" @change="uploadforground($event)" style="width:100px;display:none">上传
                                        </form>
                                    </div>
                                </FormItem>
                        </Form>
					</div>
				    <div class="spec-text">
				    	<h2>问卷首页</h2>
				    	<p>尺寸640X1236px<br/>安全区域内容 640X940px内</p>
				    </div>

				    <div class="img-item">
						 <Form inline>
                            <FormItem prop="background">
								<img v-if="background" :src="`https://evp.51job.com/51job/api/51miniadmin/${background}`" class="avatar-l" @click="handleClick2">
                                <i v-else class="img-border el-icon-plus avatar-l-uploader-icon" @click="handleClick2">+</i>
                                    <div class="up-file" style="display:none">
                                        <form>
                                            <input class="backinput" accept="image/*" name="upimage" type="file" @change="uploadbackground($event)" style="width:100px;display:none">上传
                                        </form>
                                    </div>
                                </FormItem>
                        </Form>
					</div>

				    <div class="spec-text">
				    	<h2>问卷背景图</h2>
				    	<p>尺寸640X1236px<br/>安全区域内容 640X940px内</p>
				    </div>

				    <div class="spec-text">
				    	<div style="padding:5px 20px;border:1px solid #888;text-align:center;margin-bottom: 5px">
				    		背景、提交颜色
				    	</div>
				    	<Input v-model="color" style="width: 240px;border:1px solid #888" placeholder="请输入颜色"/>
				    	<p>颜色请以“#”开头，6位数字代表颜色值</p>
				    </div>
				</div>
				<div  style="margin-top: 10px">
					<div class="img-item">
						 <Form inline>
                            <FormItem prop="wx_logo">
								<img v-if="wx_logo" :src="`https://evp.51job.com/51job/api/51miniadmin/${wx_logo}`" class="avatar-l rect" @click="handleClick3">
                                <i v-else class="img-border el-icon-plus avatar-l-uploader-icon rect" @click="handleClick3">+</i>
                                    <div class="up-file" style="display:none">
                                        <form>
                                            <input class="wx_logo" accept="image/*" name="upimage" type="file" @change="uploadShareLogo($event)" style="width:100px;display:none">上传
                                        </form>
                                    </div>
                                </FormItem>
                        </Form>
					</div>
				    <div class="spec-text">
				    	<h2>分享图</h2>
				    	<p>尺寸200X200px<br/>安全区域内容 200X200px内</p>
				    </div>

				    <div class="spec-text share">
				    	<div>
                            分享标题<br>
                            <Input v-model="wx_title" style="width: 240px;border:1px solid #888" placeholder="标题"/>
				    	</div>
				    	<div :style="{'margin-top': '10px'}">
				    		分享描述<br>
                            <Input v-model="wx_desc" style="width: 240px;border:1px solid #888" placeholder="描述"/>
				    	</div>
				    </div>
				</div>
			</div>
		</div>
  	</div>
</template>
<script>
export default {
    data() {
		return {
			qid: 0,
			visible: false,
			forground: '',
			background: '',
			color: '',
            wx_logo: '',
            wx_title: '',
            wx_desc: ''
		}
	},
	created(){
          //获取传入的参数
          var params = this.$route.params;
          this.qid = params.qid;

          var self = this
          $.ajax({
          	url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_configone&id="+this.qid,
          	type: "POST",
          	dataType: "json",
          	success: function(data) {
          		console.log(data);
          		if (data.code == 1) {
          			self.color = data.data.bg_color
          			self.forground = data.data.hp_pic
          			self.background = data.data.bg_pic,
                    self.wx_logo = data.data.wx_logo,
                    self.wx_title = data.data.wx_title,
                    self.wx_desc = data.data.wx_desc
          		}
          	}
          });
      },
    methods: {
    	handleClick() {
    		$(".forinput").click();
    	},
    	handleClick2() {
    		$(".backinput").click();
    	},
        handleClick3() {
            $(".wx_logo").click();
        },
    	uploadforground(e) {
            console.log(e);

            var self = this;
            var file = e.target.files[0];
            if(!file) return;
            var filesize = file.size;
            var filename = file.name;

            if (filesize > 2101440) {
                self.$Message.error("图片超过2m");
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var imgcode = e.target.result;
                self.forground = imgcode;
                console.log(self.forground);
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyswiper",
                    data: {
                        file: self.forground
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.forground = data.url;
                    }
                });
            };
        },
        uploadbackground(e) {
            console.log(e);

            var self = this;
            var file = e.target.files[0];
            var filesize = file.size;
            var filename = file.name;

            if (filesize > 2101440) {
                self.$Message.error("图片超过2m");
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var imgcode = e.target.result;
                self.background = imgcode;
                console.log(self.background);
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyswiper",
                    data: {
                        file: self.background
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.background = data.url;
                    }
                });
            };
        },
        uploadShareLogo(e) {
            console.log(123)

            var self = this;
            var file = e.target.files[0];
            if(!file) return;

            var filesize = file.size;
            var filename = file.name;

            if (filesize > 200 * 1024) {
                self.$Message.error("图片超过200k");
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var imgcode = e.target.result;
                self.wx_logo = imgcode;
                console.log(self.wx_logo);
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyswiper",
                    data: {
                        file: self.wx_logo
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.wx_logo = data.url;
                    }
                });
            };
        },
        saveStyle(e) {
        	var self = this
        	if (this.forground.length > 0 && this.background.length > 0 && this.color.length > 0) {
        		$.ajax({
                        url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=questionnaire_configsave&id="+this.qid,
                        data: {
                            bg_pic : this.background,
                            hp_pic : this.forground,
                            bg_color : this.color,
                            wx_logo: this.wx_logo,
                            wx_desc: this.wx_desc,
                            wx_title: this.wx_title
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            if (data.code == 1) {
                            	self.$Message.success("保存成功！")
                            }
                        }
                    });
        	}
        	else {
        		this.$Message.error("请填写完整资料")
        	}
        }
    }
};
</script>